import React from 'react'
import PropTypes from 'prop-types'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { message } from 'antd'
import { awaitWrap } from '@js/tool'
import { requestFiles } from '@js/request'
import Approve from '@components/ApprovePre/Index'
import StepOneInput from './components/StepOneInput'
import StepTwoInput from './components/StepTwoInput'
import StepFourInput from './components/StepFourInput'
import StepOneHistory from './components/StepOneHistory'
import StepTwoHistory from './components/StepTwoHistory'
import StepFourHistory from './components/StepFourHistory'

class Postpone extends Component {
  // 提交前处理
  beforeSubmit (instance, data) {
    switch (instance.currentStep.step_key) {
      case 'tuichuhuibi01':
        return this.stepOneInputBeforeSubmit(instance, data)
      case 'tuichuhuibi03':
      case 'tuichuhuibi04':
        return this.stepTwoInputBeforeSubmit(instance, data)
      default:
        return data
    }
  }

  // 第一步提交
  async stepOneInputBeforeSubmit (instance, data) {
    let fileid = ''
    const file = data.file ? data.file.fileList : []
    const result = { remark: data.remark }
    if (file.length) {
      const hide = message.loading('文件提交中', 120)
      const [e, d] = await awaitWrap(requestFiles(file))
      hide()
      if (e) {
        return message.warning(e.message)
      }
      fileid = d.map(li => li.id).join()
    }
    data.limitextended_fileid = fileid
    if (data.limitextended_submittal) {
      data.limitextended_submittal = JSON.stringify(data.limitextended_submittal.map(li => ({ name: li.name, id: li.id })))
    }
    const vars = data.vars
    delete data.remark
    delete data.file
    delete data.vars
    result.vars = { ...vars, ...data }
    return result
  }

  stepTwoInputBeforeSubmit (instance, data) {
    const result = { remark: data.remark }
    const vars = data.vars
    delete data.remark
    delete data.file
    delete data.vars
    result.vars = { ...vars, ...data }
    return result
  }

  getFormInitialData (instance) {
    if (instance.currentStep.step_key === 'tuichuhuibi04') {
      const history = instance.history.filter(li => li.step_key === 'tuichuhuibi01')
      history.sort((a, b) => b.create_datetime - a.create_datetime)
      const d = history[0] || { varsMap: {} }
      const m = d.varsMap
      return {
        limitextended_days: (m.limitextended_pre_days || { value: '' }).value,
        limitextended_end_datetime: (m.limitextended_pre_end_datetime || { value: '' }).value
      }
    }
    return {}
  }

  // 渲染当前操作步骤线上部分
  renderCurrentStepLineTop (formRef, instance, renderFn) {
    switch (instance.currentStep.step_key) {
      case 'tuichuhuibi01':
        return <StepOneInput instance={instance} userInfo={this.props.userInfo} caseDetail={this.props.caseDetail} formRef={formRef} />
      case 'tuichuhuibi03':
        return <StepTwoInput instance={instance} userInfo={this.props.userInfo} caseDetail={this.props.caseDetail} formRef={formRef} />
      case 'tuichuhuibi04':
        return <StepFourInput instance={instance} userInfo={this.props.userInfo} caseDetail={this.props.caseDetail} formRef={formRef} />
      default:
        return renderFn()
    }
  }

  // 渲染历史
  renderHistory (action, renderFn, instance) {
    const key = action.step_key
    if (key === 'tuichuhuibi01') {
      return <StepOneHistory key={action.id} userInfo={this.props.userInfo} instance={instance} action={action} />
    } else if (key === 'tuichuhuibi03') {
      return <StepTwoHistory key={action.id} userInfo={this.props.userInfo} instance={instance} action={action} />
    } else if (key === 'tuichuhuibi04') {
      return <StepFourHistory key={action.id} userInfo={this.props.userInfo} instance={instance} action={action} />
    }
    return renderFn(action)
  }

  render () {
    return (
      <div>
        <Approve
          caseDetail={this.props.caseDetail}
          flowKey='yanchangshenxian'
          afterAction={(instance, action) => this.props.refreshCaseData()}
          creatable={this.props.editable}
          renderCurrentStepLineTop={(...params) => this.renderCurrentStepLineTop(...params)}
          renderHistory={(h, renderFn, instance) => this.renderHistory(h, renderFn, instance)}
          initialCurrentStepFormData={instance => this.getFormInitialData(instance)}
          beforeSubmit={(...params) => this.beforeSubmit(...params)}
          multiply
        />
      </div>
    )
  }
}

Postpone.propTypes = {
  // caseDetail: PropTypes.object,
  // active: PropTypes.bool,
  refreshCaseData: PropTypes.func,
  editable: PropTypes.bool
  // fileList: PropTypes.array
  // getFileList: PropTypes.func
}
Postpone.defaultProps = {
  caseDetail: {},
  active: false,
  refreshCaseData: () => {},
  editable: false,
  fileList: [],
  getFileList: () => {}
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(Postpone)
